<!-- 头部 -->
<div th:fragment="bg_head(title,keywords,description,bgConfig)">
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title th:text="${title}"></title>
	<meta property="og:site_name" content="bgConfig['oly.web.title']">
	<meta property="og:title" content="${title}">
	<meta name="author" th:content="${bgConfig['oly.web.author']}">
	<meta name="copyright" th:content="${bgConfig['oly.web.copyright']}">
	<meta name="keywords" th:content="${keywords}">
	<meta name="description" th:content="${description}">
	<meta property="og:description" th:content="${description}">
	<link th:href="@{/static/butgo/css/index.css}" rel="stylesheet" />
	<link th:href="@{/static/butgo/css/fancybox.css}" rel="stylesheet" />
	<link th:href="@{/static/butgo/libs/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet" />
	<link th:href="@{/static/butgo/libs/alert/alert.main.css}" rel="stylesheet" />
	<link th:href="@{/static/butgo/libs/alert/alert.ani.main.css}" rel="stylesheet" />
	<link th:href="@{/static/butgo/libs/message/message.main.css}" rel="stylesheet" />

	<style type="text/css">
		.alert-close {
			z-index: 9999;
		}

		html .login-wrap .form input[type="text"],
		html .login-wrap .form input[type="password"],
		html .login-wrap .form .checkbox-custom,
		html .login-wrap .form button {
			width: 80%;
			margin-left: 10%;
			margin-bottom: 25px;
			height: 40px;
			border-radius: 5px;
			outline: 0;
			-moz-outline-style: none;
		}

		html .login-wrap .form .checkbox-custom {
			margin-bottom: 0;
		}

		html .login-wrap .form input[type="text"],
		html .login-wrap .form input[type="password"] {
			border: 1px solid #bbb;
			padding: 0 0 0 10px;
			font-size: 14px;
		}

		html .login-wrap .form input[type="text"]:focus,
		html .login-wrap .form input[type="password"]:focus {
			border: 1px solid #3498db;
		}

		html .login-wrap .form a {
			text-align: center;
			font-size: 12px;
			color: #3498db;
		}

		html .login-wrap .form a p {
			padding-bottom: 10px;
		}

		html .login-wrap .form button {
			background: #e74c3c;
			border: none;
			color: white;
			font-size: 18px;
			font-weight: 200;
			cursor: pointer;
			transition: box-shadow .4s ease;
		}

		html .login-wrap .form button:hover {
			box-shadow: 1px 1px 5px #555;
		}

		html .login-wrap .form button:active {
			box-shadow: 1px 1px 7px #222;
		}

		html .login-wrap:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background: -webkit-linear-gradient(left, #27ae60 0%, #27ae60 20%, #8e44ad 20%, #8e44ad 40%, #3498db 40%, #3498db 60%, #e74c3c 60%, #e74c3c 80%, #f1c40f 80%, #f1c40f 100%);
			background: -moz-linear-gradient(left, #27ae60 0%, #27ae60 20%, #8e44ad 20%, #8e44ad 40%, #3498db 40%, #3498db 60%, #e74c3c 60%, #e74c3c 80%, #f1c40f 80%, #f1c40f 100%);
			height: 5px;
			border-radius: 5px 5px 0 0;
		}
	</style>


	<style>
		iframe,
		video {
			max-width: 100% !important;
		}

		#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap .article-meta-label,
		#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap a {
			display: inline-block;
		}

		#site-name img {
			max-height: 60px;
			width: auto;

		}
	</style>

	<script>
		const GLOBAL_CONFIG = {
			root: '/',
			algolia: undefined,
			localSearch: {
				"path": "search.xml",
				"languages": {
					"hits_empty": "找不到您查询的内容：${query}"
				}
			},
			translate: undefined,
			noticeOutdate: undefined,
			highlight: {
				"plugin": "highlighjs",
				"highlightCopy": true,
				"highlightLang": true,
				"highlightHeightLimit": false
			},
			copy: {
				success: '复制成功',
				error: '复制错误',
				noSupport: '浏览器不支持'
			},
			relativeDate: {
				homepage: false,
				post: false
			},
			runtime: '',
			date_suffix: {
				just: '刚刚',
				min: '分钟前',
				hour: '小时前',
				day: '天前',
				month: '个月前'
			},
			copyright: undefined,
			lightbox: 'fancybox',
			Snackbar: undefined,
			source: {
				justifiedGallery: {
					js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.js',
					css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.css'
				}
			},
			isPhotoFigcaption: false,
			islazyload: false,
			isAnchor: false
		}
	</script>
	<script id="config-diff">
		var GLOBAL_CONFIG_SITE = {
			title: '雨落泪尽',
			isPost: false,
			isHome: true,
			isHighlightShrink: false,
			isToc: false,
			postUpdate: '2022-08-17 22:56:04'
		}
	</script>
	<!-- 不支持脚本时用 -->
	<noscript>
		<style type="text/css">
			#nav {
				opacity: 1
			}

			.justified-gallery img {
				opacity: 1
			}

			#recent-posts time,
			#post-meta time {
				display: inline !important
			}
		</style>
	</noscript>
	<script>
			(win => {
				win.saveToLocal = {
					set: function setWithExpiry(key, value, ttl) {
						if (ttl === 0) return
						const now = new Date()
						const expiryDay = ttl * 86400000
						const item = {
							value: value,
							expiry: now.getTime() + expiryDay,
						}
						localStorage.setItem(key, JSON.stringify(item))
					},
					get: function getWithExpiry(key) {
						const itemStr = localStorage.getItem(key)
						if (!itemStr) {
							return undefined
						}
						const item = JSON.parse(itemStr)
						const now = new Date()

						if (now.getTime() > item.expiry) {
							localStorage.removeItem(key)
							return undefined
						}
						return item.value
					}
				}

				win.getScript = url => new Promise((resolve, reject) => {
					const script = document.createElement('script')
					script.src = url
					script.async = true
					script.onerror = reject
					script.onload = script.onreadystatechange = function () {
						const loadState = this.readyState
						if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
						script.onload = script.onreadystatechange = null
						resolve()
					}
					document.head.appendChild(script)
				})

				win.activateDarkMode = function () {
					document.documentElement.setAttribute('data-theme', 'dark')
					if (document.querySelector('meta[name="theme-color"]') !== null) {
						document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
					}
				}
				win.activateLightMode = function () {
					document.documentElement.setAttribute('data-theme', 'light')
					if (document.querySelector('meta[name="theme-color"]') !== null) {
						document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
					}
				}
				const t = saveToLocal.get('theme')

				if (t === 'dark') activateDarkMode()
				else if (t === 'light') activateLightMode()

				const asideStatus = saveToLocal.get('aside-status')
				if (asideStatus !== undefined) {
					if (asideStatus === 'hide') {
						document.documentElement.classList.add('hide-aside')
					} else {
						document.documentElement.classList.remove('hide-aside')
					}
				}
				const detectApple = () => {
					if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
						document.documentElement.classList.add('apple')
					}
				}
				detectApple();



			})(window);
	</script>
</div>

<div th:fragment="bg_nav">
	<nav id="nav" class="show">
		<span id="blog_name">
			<a id="site-name" th:href="${bgConfig['oly.web.domain']}">
				<span th:if="${#strings.isEmpty(bgConfig['oly.web.logo'])}"
					th:text="${bgConfig['oly.web.title']}">Butterfly</span>
				<img th:if="${!#strings.isEmpty(bgConfig['oly.web.logo'])}" th:src="${bgConfig['oly.web.logo']}" />
			</a>
		</span>
		<div id="menus">
			<div id="search-button">
				<a class="site-page social-icon search">
					<i class="fa fa-search fa-fw"></i>
					<span>搜寻</span>
				</a>
			</div>
			<th:block th:include="butgo/bg_include ::bg_menu" />
			<div id="toggle-menu"><a class="site-page"><i class="fa fa-bars fa-fw"></i></a>
			</div>
		</div>
	</nav>
</div>

<!-- 主页导航 -->
<div th:fragment="bg_header_full(siteImg)">
	<header class="full_page" id="page-header" th:style="'background-image:url('+${siteImg}+')'">
		<th:block th:include="butgo/bg_include ::bg_nav" />
		<div id="site-info">
			<h1 id="site-title">Butterfly</h1>
			<div id="site-subtitle"><span id="subtitle"></span></div>
			<div id="site_social_icons" style="display: block;"><a class="social-icon" href="mailto:my@crazywong.com"
					rel="external nofollow noreferrer" target="_blank" title="Email"><i
						class="fa fa-envelope"></i></a><a class="social-icon" href="/atom.xml" target="_blank"
					title="RSS"><i class="fa fa-rss"></i></a></div>
		</div>
		<div id="scroll-down"><i class="fa fa-angle-down scroll-down-effects"></i></div>
	</header>
</div>

<!-- 其它导航 -->
<div th:fragment="bg_header_half(siteTitle,siteImg)">
	<header class="not-home-page" id="page-header" th:style="'background-image:url('+${siteImg}+')'">
		<th:block th:include="butgo/bg_include ::bg_nav" />
		<div id="page-site-info">
			<h1 id="site-title" th:text="${siteTitle}"></h1>
		</div>
	</header>
</div>

<!-- 标签页面导航 -->
<div th:fragment="bg_header_tag(siteTitle,siteImg,tag)">
	<header class="not-home-page" id="page-header" th:style="'background-image:url('+${siteImg}+')'">
		<th:block th:include="butgo/bg_include ::bg_nav" />
		<div id="page-site-info">
			<h1 id="site-title" th:text="${siteTitle}"></h1>
			<div id="post-meta" style="text-align: center;">
				<div class="meta-firstline">
					<span class="post-meta-date">
						<i class="fa-fw post-meta-icon far fa-calendar-alt"></i>
						<span class="post-meta-label">创建于</span>
						<time th:datetime="${tag.createTime}"
							th:title="${'创建于'+#dates.format(tag.createTime,'yyyy-MM-dd HH:mm')}"
							style="display: inline;" th:text="${#dates.format(tag.createTime,'yyyy-MM-dd HH:mm')}">
							2020-5-28
						</time>
					</span>
					<span class="article-meta">
						<span class="article-meta-separator">|</span>
						<i class="fa fa-inbox"></i>
						<span class="post-meta-label" th:text="${tag.tagPassCount}"></span>
					</span>
				</div>
			</div>
		</div>
	</header>
</div>

<!-- 分类页面导航 -->
<div th:fragment="bg_header_category(siteTitle,siteImg,category)">
	<header class="not-home-page" id="page-header" th:style="'background-image:url('+${siteImg}+')'">
		<th:block th:include="butgo/bg_include ::bg_nav" />
		<div id="page-site-info">
			<h1 id="site-title" th:text="${siteTitle}"></h1>
			<div id="post-meta" style="text-align: center;">
				<div class="meta-firstline">
					<span class="post-meta-date">
						<i class="fa-fw post-meta-icon far fa-calendar-alt"></i>
						<span class="post-meta-label">创建于</span>
						<time th:datetime="${category.createTime}"
							th:title="${'创建于'+#dates.format(category.createTime,'yyyy-MM-dd HH:mm')}"
							style="display: inline;" th:text="${#dates.format(category.createTime,'yyyy-MM-dd HH:mm')}">
							2020-5-28
						</time>
					</span>
					<span class="article-meta">
						<span class="article-meta-separator">|</span>
						<i class="fa fa-inbox"></i>
						<span class="post-meta-label" th:text="${category.categoryPassCount}"></span>
					</span>
				</div>
			</div>
		</div>
	</header>
</div>

<!-- 搜索文章 -->
<div th:fragment="bg_local_search">
	<div id="local-search">
		<div class="search-dialog">
			<nav class="search-nav"><span class="search-dialog-title">本地搜索</span><span
					id="loading-status"></span><button class="search-close-button"><i class="fa fa-times"></i></button>
			</nav>
			<div class="is-center" id="loading-database"><i class="fa fa-spinner fa-pulse"></i><span> 数据库加载中</span>
			</div>
			<div class="search-wrap">
				<div id="local-search-input">
					<div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章"
							type="text" /></div>
				</div>
				<hr />
				<div id="local-search-results"></div>
			</div>
		</div>
		<div id="search-mask"></div>
	</div>
</div>

<!-- 移动端侧边导航 -->
<div th:fragment="bg_side_bar">
	<div id="sidebar">
		<div id="menu-mask"></div>
		<div id="sidebar-menus">
			<th:block th:include="butgo/bg_include ::bg_num" />
			<hr>
			<th:block th:include="butgo/bg_include ::bg_menu" />
		</div>
	</div>
</div>

<!-- 导航 -->
<div th:fragment="bg_menu">
	<div class="menus_items"
		th:with="columns=${@columnTag.getColumnTreeById(@configTag.getKey('butgo','oly.web.theme.butgo.column.main'))}">
		<div class="menus_item" th:if="columns!=null" th:each="column: ${columns.childList}">
			<th:block th:if="${#lists.isEmpty(column.childList)}">
				<a class="site-page"
					th:href="${#strings.isEmpty(column.columnUrl)?'javascript:void(0);': bgConfig['oly.web.domain']+column.columnUrl}">
					<i class="fa-fw fa" th:if="${!#strings.isEmpty(column.columnIcon)}"
						th:classappend="${column.columnIcon}"></i>
					<span th:text="${column.columnName}">首页</span>
				</a>
			</th:block>
			<th:block th:if="${!#lists.isEmpty(column.childList)}">
				<a class="site-page group" href="javascript:void(0);" rel="external nofollow noreferrer">
					<i class="fa-fw fa" th:if="${!#strings.isEmpty(column.columnIcon)}"
						th:classappend="${column.columnIcon}"></i>
					<span th:text="${column.columnName}">首页</span>
					<i class="fa fa-chevron-down"></i></a>
				<ul class="menus_item_child">
					<li th:each="columnChild: ${column.childList}">
						<a class="site-page child" th:href="${bgConfig['oly.web.domain']+columnChild.columnUrl}">
							<i class="fa-fw fa" th:if="${!#strings.isEmpty(columnChild.columnIcon)}"
								th:classappend="${columnChild.columnIcon}"></i>
							<span th:text="${columnChild.columnName}">首页</span>
						</a>
					</li>
				</ul>
			</th:block>
		</div>

		<div class="menus_item" sec:authorize="isAnonymous()">
			<input id="userId" type="hidden" value="" />
			<input id="userName" type="hidden" value="" />
			<input id="themeName" type="hidden" value="butgo" />
			<a class="site-page" href="javascript:void(0)" onclick="tzAlert.open()" title="登录">
				<i class="fa fa-fw fa-sign-in"></i>
			</a>
		</div>

		<div sec:authorize="isAuthenticated()" class="menus_item" th:with="user=${@userTag.getLoginUser()}">
			<input id="userId" type="hidden" th:value="${user.userId}" />
			<input id="userName" type="hidden" th:value="${user.userName}" />
			<input id="themeName" type="hidden" value="butgo" />
			<img th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : ${user.avatar}"
				style="max-width: 40px;border-radius: 40px;line-height: 40px;float: left;margin-right: 5px;">
			<a class="site-page" href="javascript:void(0)">
				<i class="fa fa-chevron-down"></i>
			</a>
			</a>
			<ul class="menus_item_child">
				<li>
					<a class="site-page child" th:href="@{/admin}">
						<span>个人中心</span>
					</a>
				</li>
				<li>
					<a class="site-page child" th:href="@{/logout?themeName=butgo}">
						<span>退出登录</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

<!-- 右边工具栏 -->
<div th:fragment="bg_right_tool">
	<div id="rightside" style="opacity: 0.8; transform: translateX(-58px);">
		<div id="rightside-config-hide">
			<button id="darkmode" type="button" title="浅色和深色模式转换">
				<i class="fa fa-adjust"></i>
			</button>
			<button id="hide-aside-btn" type="button" title="单栏和双栏切换">
				<i class="fa fa-arrows-h"></i>
			</button>
		</div>
		<div id="rightside-config-show">
			<button id="rightside_config" type="button" title="设定">
				<i class="fa fa-cog fa-spin"></i>
			</button>
			<button id="go-up" type="button" title="回到顶部">
				<i class="fa fa-arrow-up"></i>
			</button>
		</div>
	</div>
</div>

<!-- 文章右边工具栏 -->
<div th:fragment="bg_article_right_tool">
	<div id="rightside" style="opacity: 0.8; transform: translateX(-58px);">
		<div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i
					class="fa fa-map-o"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i
					class="fa fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i
					class="fa fa-arrows-h"></i></button></div>
		<div id="rightside-config-show"><button id="rightside_config" type="button" title="设定"><i
					class="fa fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button"
				title="目录"><i class="fa fa-list-ul"></i></button>
			<button id="go-up" type="button" title="回到顶部"><i class="fa fa-arrow-up"></i></button>
		</div>
	</div>

</div>

<!-- 轮播 -->
<div th:fragment="bg_carousel">
	<div class="swipe" th:with="articles=${@articleCountSortTag.listWebArticleByTagId('butgo',1,1,10)}">
		<ul class="swipe-box" th:if="${!#lists.isEmpty(articles)}">
			<li class="swipe-item animated" th:each="article,articleStatus:${articles}"
				th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/butgo/images/thumbs/}">
				<img th:src="${(imgs==null)?iul+rando+'.jpg':imgs[0]}" />
				<div class="swipe-msg">
					<a th:href="${bgConfig['oly.web.domain']+'/article/'+article.articleId}"
						th:title="${article.articleTitle}" th:text="${article.articleTitle}"> </a>
					<p th:text="${article.articleSummary}"></p>
				</div>
			</li>
		</ul>
		<!-- 下跳事件开始 -->
		<div id="scroll-down">
			<i class="fa fa-angle-down scroll-down-effects"></i>
		</div>
		<!-- 下跳事件结束 -->
	</div>
</div>

<!-- 站点 标签 文章 分类数目 -->
<div th:fragment="bg_num">
	<div class="is-center" th:with="user=${@commonTag.getUserVo('admin')}">
		<div class="avatar-img" th:if="${user!=null}">
			<img th:src="${user.avatar}" data-lazy-src="/img/avatar.png"
				onerror="this.onerror=null,this.src=&quot;/img/friend_404.gif&quot;" alt="avatar" data-ll-status="error"
				class="entered error">
		</div>
		<div class="author-info__name" th:text="${user.nickName}">Jerry</div>
		<div class="author-info__description" th:text="${user.remark}">A Simple and Card UI Design theme for
			Hexo</div>
	</div>
	<div class="card-info-data site-data is-center">
		<a th:href="${bgConfig['oly.web.domain']+'/article'}">
			<div class="headline">文章</div>
			<div class="length-num" th:text="${@articleTag.selectArticleNum('butgo')}">17</div>
		</a>
		<a th:href="${bgConfig['oly.web.domain']+'/category/type/TAG_TRUCK'}">
			<div class="headline">标签</div>
			<div class="length-num" th:text="${@categoryTag.selectCategoryNum('butgo','TAG_TRUCK')}">11</div>
		</a>
		<a th:href="${bgConfig['oly.web.domain']+'/category/type/CLASSIFY_TRUCK'}">
			<div class="headline">分类</div>
			<div class="length-num" th:text="${@categoryTag.selectCategoryNum('butgo','CLASSIFY_TRUCK')}">5</div>
		</a>
	</div>
</div>

<!-- 卡片信息 -->
<div th:fragment="bg_card_info">
	<div class="card-widget card-info">
		<th:block th:include="butgo/bg_include ::bg_num" />
		<a id="card-info-btn" target="_blank" rel="noopener external nofollow noreferrer"
			href="https://github.com/jerryc127/hexo-theme-butterfly">
			<i class="fa fa-github"></i>
			<span>主题
				GitHub</span>
		</a>
		<div class="card-info-social-icons is-center">
			<a class="social-icon" href="mailto:my@crazywong.com" rel="external nofollow noreferrer" target="_blank"
				title="Email">
				<i class="fa fa-envelope"></i>
			</a>
			<a class="social-icon" href="/atom.xml" target="_blank" title="RSS">
				<i class="fa fa-rss"></i>
			</a>
		</div>
	</div>
</div>

<!-- 公告 -->
<div th:fragment="bg_card_notice">
	<div class="card-widget card-announcement">
		<div class="item-headline">
			<i class="fa fa-bullhorn fa-shake"></i>
			<span>公告</span>
		</div>
		<div class="announcement_content">如果你在使用中遇到问题,请加群893754716反馈</div>

	</div>
</div>

<!-- 文档目录 -->
<div th:fragment="bg_card_docs">
	<div class="card-widget card-docs card-categories">
		<div class="item-headline">
			<i class="fa fa-car-side"></i>
			<span>文档目录</span>
		</div>
		<div class="item-content">
			<ul class="card-category-list">
				<li class="card-category-list-item">
					<a class="card-category-list-link" href="/posts/21cfbf15/">?? 快速开始</a>
				</li>
				<li class="card-category-list-item">
					<a class="card-category-list-link" href="/posts/dc584b87/">?? 主题页面</a>
				</li>
				<li class="card-category-list-item">
					<a class="card-category-list-link" href="/posts/4aa8abbe/">?? 主题配置-1</a>
				</li>
				<li class="card-category-list-item">
					<a class="card-category-list-link" href="/posts/ceeb73f/">⚔️ 主题配置-2</a>
				</li>
				<li class="card-category-list-item">
					<a class="card-category-list-link" href="/posts/98d20436/">❓ 主题问答</a>
				</li>
				<li class="card-category-list-item">
					<a class="card-category-list-link" href="/posts/4073eda/">⚡️ 进阶教程</a>
				</li>
				<li class="card-category-list-item">
					<a class="card-category-list-link" href="/posts/198a4240/">✨ 更新日誌</a>
				</li>
			</ul>
		</div>
	</div>
</div>

<!-- 侧边布局 -->
<div th:fragment="bg_sticky">
	<!-- 最近文章 -->
	<div class="card-widget card-recent-post"
		th:with="articles=${@articleCountSortTag.listWebArticleOrder(1,@configTag.getKeyDefault('butgo','oly.web.theme.butgo.article.now',10),'butgo','TIME','DESC')}">
		<div class="item-headline" th:if="${articles!=null}">
			<i class="fa fa-history"></i>
			<span>最新文章</span>
		</div>
		<div class="aside-list" th:if="${articles!=null}">
			<div class="aside-list-item" th:each="article:${articles}">
				<a class="thumbnail" th:href="${bgConfig['oly.web.domain']+'/article/'+article.articleId}"
					th:title="${article.articleTitle}">
					<img th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/butgo/images/thumbs/}"
						th:src="${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
						data-lazy-src="https://fatly.jsdelivr.net/gh/jerryc127/CDN/img/aside-diy-cover.png"
						onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" th:alt="${article.articleTitle}">
				</a>
				<div class="content">
					<a class="title" th:href="${bgConfig['oly.web.domain']+'/article/'+article.articleId}"
						th:title="${article.articleTitle}" th:text="${article.articleTitle}">自定义侧边栏</a>
					<time th:datetime="${article.createTime}"
						th:title="${'发表于:'+#dates.format(article.createTime,'yyyy-MM-dd HH:mm')}"
						th:text="${#dates.format(article.createTime,'yyyy-MM-dd HH:mm')}">2020-12-30</time>
				</div>
			</div>
		</div>
	</div>
	<!-- 最新评论 -->
	<div class="card-widget" id="card-newest-comments" style="display: none;" th:with="cs=${@commentTag.recentlyComment(0,1,10)}">
		<div class="item-headline" th:if="${cs!=null}">
			<i class="fa fa-comment-dots"></i>
			<span>最新评论</span>
		</div>
		<div class="aside-list"  style="margin-top:5px" th:if="${cs!=null}" th:each="c:${cs}">
			<div class="aside-list-item">
				<a href="#0" class="thumbnail">
					<img th:data-lazy-src="${c.fromUser.avatar}" th:src="${c.fromUser.avatar}"
						th:alt="${c.fromUser.nickName}">
				</a>
				<div class="content">
					<a class="comment new-comment" href="#0" th:utext="${c.content}">hexo的配置文档有一个url的配置选项，把里面的地址改成你自己的博客地址
					</a>
					<div class="name">
						<span th:text="${c.fromUser.nickName}">xuesj / </span>
						<time th:datetime="${c.createTime}"
							th:text="${#dates.format(c.createTime,'yyyy-MM-dd HH:mm')}">51
						</time>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 分类列表 -->
	<div class="card-widget card-categories"
		th:with="categories=${@categoryTag.listCmsCategoryByOrder('CLASSIFY','butgo',1L)}">
		<div class="item-headline" th:if="${categories!=null}">
			<i class="fa fa-folder-open"></i>
			<span>热门分类</span>
		</div>
		<ul class="card-category-list" th:if="${categories!=null}" id="aside-cat-list">
			<li class="card-category-list-item" th:each="category:${categories}">
				<a class="card-category-list-link"
					th:href="${bgConfig['oly.web.domain']+'/category/'+category.categoryId}">
					<span class="card-category-list-name" th:text="${category.categoryName}">Demo</span>
					<span class="card-category-list-count" th:text="${category.categoryPassCount}">5</span>
				</a>
			</li>
		</ul>
	</div>
	<!-- 标签列表 -->
	<div class="card-widget card-tags" th:with="categories=${@categoryTag.listCmsCategoryByOrder('TAG','butgo',1L)}">
		<div class="item-headline" th:if="${categories!=null}">
			<i class="fa fa-tags"></i>
			<span>热门标签</span>
		</div>
		<div class="card-tag-cloud" th:if="${categories!=null}">
			<a th:each="category:${categories}" th:href="${bgConfig['oly.web.domain']+'/category/'+category.categoryId}"
				th:text="${category.categoryName}">教程</a>
		</div>
	</div>
	<!-- 归档 -->
	<div class="card-widget card-archives" th:with="ts=${@articleTag.listArticleTimeNum('butgo',1,10)}">
		<div class="item-headline" th:if="${ts!=null}">
			<i class="fa fa-archive"></i>
			<span>归档</span>
			<a class="card-more-btn" th:href="${bgConfig['oly.web.domain']+'/timeLine'}" title="查看更多">
				<i class="fa fa-angle-right"></i>
			</a>
		</div>
		<ul class="card-archive-list" th:if="${ts!=null}">
			<li class="card-archive-list-item" th:each="t:${ts}">
				<a class="card-archive-list-link"
					th:href="${bgConfig['oly.web.domain']+'/timeLine/page/1/20?crTime='+t.ym}">
					<span class="card-archive-list-date" th:text="${t.ym}"></span>
					<span class="card-archive-list-count" th:text="${t.num}">1</span>
				</a>
			</li>
		</ul>
	</div>
	<!-- 统计信息 -->
	<div class="card-widget card-webinfo">
		<div class="item-headline">
			<i class="fa fa-chart-line"></i>
			<span>网站资讯</span>
		</div>
		<div class="webinfo">
			<div class="webinfo-item">
				<div class="item-name">文章数目 :</div>
				<div class="item-count" th:text="${@articleTag.selectArticleNum('butgo')}"></div>
			</div>
			<div class="webinfo-item">
				<div class="item-name">已运行时间 :</div>
				<div class="item-count" id="runtimeshow" data-publishdate="2019-11-13T00:00:00.000Z">
					1014 天</div>
			</div>
			<div class="webinfo-item">
				<div class="item-name">本站总字数 :</div>
				<div class="item-count">50.4k</div>
			</div>
			<div class="webinfo-item" th:if="false">
				<div class="item-name">本站访客数 :</div>
				<div class="item-count" id="busuanzi_value_site_uv">151623</div>
			</div>
			<div class="webinfo-item" th:if="false">
				<div class="item-name">本站总访问量 :</div>
				<div class="item-count" id="busuanzi_value_site_pv">1108493</div>
			</div>
			<div class="webinfo-item">
				<div class="item-name">最后更新时间 :</div>
				<div class="item-count" id="last-push-date" data-lastpushdate="2022-08-07T04:22:21.875Z">15 天前
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 侧边 -->
<div th:fragment="bg_right_aside">
	<div class="aside-content" id="aside-content" style="height: auto !important;">
		<th:block th:include="butgo/bg_include ::bg_card_info" />
		<th:block th:include="butgo/bg_include ::bg_card_notice" />

		<div class="sticky_layout" style="height: auto !important;">
			<th:block th:include="butgo/bg_include ::bg_sticky" />
		</div>
	</div>
</div>

<!-- 文章列表 -->
<div th:fragment="bg_page_post_list(articles)">
	<div class="recent-post-item" th:if="${!#lists.isEmpty(articles)}" th:each="article,stat:${articles}">
		<div class="post_cover" th:classappend="${(stat.index%2==0)?'left':'right'}"
			th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/butgo/images/thumbs/}">
			<a th:href="${bgConfig['oly.web.domain']+'/article/'+article.articleId}" th:title="${article.articleTitle}">
				<img class="post_bg entered error" th:src="${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
					th:data-lazy-src="@{/static/butgo/images/loading/loading.gif}"
					onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" th:alt="${article.articleTitle}"
					data-ll-status="error">
			</a>
		</div>
		<div class="recent-post-info">
			<a class="article-title" th:href="${bgConfig['oly.web.domain']+'/article/'+article.articleId}"
				th:title="${article.articleTitle}" th:text="${article.articleTitle}"></a>
			<div class="article-meta-wrap">
				<span class="article-meta" th:if="${article.articleTop==10}">
					<i class="fa fa-thumb-tack sticky"></i>
					<span class="sticky">置顶</span>
					<span class="article-meta-separator">|</span>
				</span>
				<span class="post-meta-date">
					<i class="fa fa-calendar" aria-hidden="true"></i><span class="article-meta-label">发表于
					</span>
					<time th:datetime="${#dates.format(article.createTime,'yyyy-MM-dd HH:mm')}"
						th:title="${#dates.format(article.createTime,'yyyy-MM-dd HH:mm')}" style="display: inline;"
						th:text="${#dates.format(article.createTime,'yyyy-MM-dd HH:mm')}"></time>
				</span>
				<span class="article-meta">
					<span class="article-meta-separator">|</span>
					<i class="fa fa-inbox"></i>
					<th:block th:each="category:${article.mapCategory['classify']}">
						&nbsp;
						<a class="article-meta__categories"
							th:href="${bgConfig['oly.web.domain']+'/category/'+category.categoryId}"
							th:title="${category.categoryName}" th:text="${category.categoryName}">分类</a>
						&nbsp;
					</th:block>
					<span class="article-meta-separator">|</span>
					<i class="fa fa-tags" aria-hidden="true"></i>
					<th:block th:each="tag:${article.mapCategory['classify']}">
						<a class="article-meta__categories"
							th:href="${bgConfig['oly.web.domain']+'/category/'+tag.categoryId}"
							th:title="${tag.categoryName}" th:text="${tag.categoryName}">标签</a>
						&nbsp;
					</th:block>
				</span>
				<span class="article-meta" th:if="${article.articleCount?.articleDiscuss!=null}">
					<span class="article-meta-separator">|</span>
					<i class="fa fa-comments"></i>
					<span class="article-meta-label" th:text="${article.articleCount?.articleDiscuss+'条评论'}"></span>
				</span>

				<span class="article-meta" th:if="${article.articleCount?.articleLook!=null}">
					<span class="article-meta-separator">|</span>
					<i class="fa fa-eye" aria-hidden="true"></i>
					<span class="article-meta-label" th:text="${article.articleCount?.articleLook+'阅读'}"></span>
				</span>
			</div>
			<div class="content" th:text="${article.articleSummary}"></div>
		</div>
	</div>
	<div th:if="${#lists.isEmpty(articles)}">
		没有查询到你所需得内容！
	</div>
</div>

<!-- 主页文章列表 -->
<div th:fragment="bg_page_article_index(pageArticle,page)">
	<div class="recent-posts" id="recent-posts">
		<th:block th:include="butgo/bg_include :: bg_page_post_list(articles=${pageArticle.rows})" />
		<nav id="pagination" th:if="${pageArticle.pages>1}">
			<div class="pagination">
				<a th:if="${pageArticle.pageNum!=1}" th:href="${bgConfig['oly.web.domain']+'/'+page+'/page/1'}">首页</a>
				<a class="extend prev" rel="prev" th:if="${pageArticle.pageNum>1}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/page/'+(pageArticle.pageNum-1)}">
					<i class="fa fa-chevron-left fa-fw"></i>
				</a>
				<!--显示1-5页 页数少于5页-->
				<a th:if="${pageArticle.pages<6}" class="page-number"
					th:each="i:${#numbers.sequence(1,pageArticle.pages)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/page/'+i}"
					th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<!--显示中间页 页数大于5页-->
				<a th:if="${pageArticle.pages>5 and pageArticle.pageNum<4}" th:each="i:${#numbers.sequence(1,5)}"
					th:text="${i}" th:href="${bgConfig['oly.web.domain']+'/'+page+'/page/'+i}" class="page-number"
					th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<a th:if="${pageArticle.pages>5 and (pageArticle.pages-pageArticle.pageNum)>5 and pageArticle.pageNum>3}"
					th:each="i:${#numbers.sequence(pageArticle.pageNum-2,pageArticle.pageNum+2)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/page/'+i}" class="page-number"
					th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<!--显示最后5页 页数大于5页-->
				<a th:if="${pageArticle.pageNum>3 and (pageArticle.pages-pageArticle.pageNum)<6 and (pageArticle.pages-pageArticle.pageNum)>2}"
					th:each="i:${#numbers.sequence(pageArticle.pageNum-2,pageArticle.pageNum+2)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/page/'+i}" class="page-number"
					th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<a th:if="${pageArticle.pages>5 and (pageArticle.pages-pageArticle.pageNum)<3}"
					th:each="i:${#numbers.sequence(pageArticle.pages-4,pageArticle.pages)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/page/'+i}" class="page-number"
					th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<a class="extend next" rel="next" th:if="${pageArticle.pageNum<pageArticle.pages}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/page/'+(pageArticle.pageNum+1)}">
					<i class="fa fa-chevron-right fa-fw"></i>
				</a>
				<a th:if="${pageArticle.pages!=pageArticle.pageNum}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/page/'+pageArticle.pages}">尾页</a>
			</div>
		</nav>
	</div>
</div>

<!-- 标签|分类 文章列表 -->
<div th:fragment="bg_page_post_other(pageArticle,page,id)">
	<div class="recent-posts" id="recent-posts">
		<th:block th:include="butgo/bg_include :: bg_page_post_list(articles=${pageArticle.rows})" />
		<nav id="pagination" th:if="${pageArticle.pages>1}">
			<div class="pagination">
				<a th:if="${pageArticle.pageNum!=1}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/'+id+'?pageNum=1'}">首页</a>
				<a class="extend prev" rel="prev" th:if="${pageArticle.pageNum>1}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/'+id+'?pageNum='+(pageArticle.pageNum-1)}">
					<i class="fa fa-chevron-left fa-fw"></i>
				</a>
				<!--显示1-5页 页数少于5页-->
				<a th:if="${pageArticle.pages<6}" class="page-number"
					th:each="i:${#numbers.sequence(1,pageArticle.pages)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/'+id+'?pageNum='+i}"
					th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<!--显示中间页 页数大于5页-->
				<a th:if="${pageArticle.pages>5 and pageArticle.pageNum<4}" th:each="i:${#numbers.sequence(1,5)}"
					th:text="${i}" th:href="${bgConfig['oly.web.domain']+'/'+page+'/'+id+'?pageNum='+i}"
					class="page-number" th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<a th:if="${pageArticle.pages>5 and (pageArticle.pages-pageArticle.pageNum)>5 and pageArticle.pageNum>3}"
					th:each="i:${#numbers.sequence(pageArticle.pageNum-2,pageArticle.pageNum+2)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/'+id+'?pageNum='+i}" class="page-number"
					th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<!--显示最后5页 页数大于5页-->
				<a th:if="${pageArticle.pageNum>3 and (pageArticle.pages-pageArticle.pageNum)<6 and (pageArticle.pages-pageArticle.pageNum)>2}"
					th:each="i:${#numbers.sequence(pageArticle.pageNum-2,pageArticle.pageNum+2)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/'+id+'?pageNum='+i}" class="page-number"
					th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<a th:if="${pageArticle.pages>5 and (pageArticle.pages-pageArticle.pageNum)<3}"
					th:each="i:${#numbers.sequence(pageArticle.pages-4,pageArticle.pages)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/'+id+'?pageNum='+i}" class="page-number"
					th:classappend="${pageArticle.pageNum==i?'current':''}"></a>
				<a class="extend next" rel="next" th:if="${pageArticle.pageNum<pageArticle.pages}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/'+id+'?pageNum='+(pageArticle.pageNum+1)}">
					<i class="fa fa-chevron-right fa-fw"></i>
				</a>
				<a th:if="${pageArticle.pages!=pageArticle.pageNum}"
					th:href="${bgConfig['oly.web.domain']+'/'+page+'/'+id+'?pageNum='+pageArticle.pages}">尾页</a>
			</div>
		</nav>
	</div>
</div>


<div th:fragment="bg_category_type_page(nodeType)">
	<th:block th:switch="${nodeType}">
		<div class="page" id="body-wrap" th:case="CLASSIFY_TRUCK">
			<th:block
				th:include="butgo/bg_include :: bg_header_half(siteTitle='分类列表',siteImg=@{/static/butgo/images/thumbs/0.jpg})" />
			<main class="layout" id="content-inner" style="height: auto !important;">
				<th:block th:include="butgo/bg_include :: bg_category_type_page_classify(nodeType=${nodeType})" />
				<th:block th:include="butgo/bg_include :: bg_right_aside" />
			</main>
		</div>
		<div class="page" id="body-wrap" th:case="CLASSIFY">
			<th:block
				th:include="butgo/bg_include :: bg_header_half(siteTitle='分类列表',siteImg=@{/static/butgo/images/thumbs/0.jpg})" />
			<main class="layout" id="content-inner" style="height: auto !important;">
				<th:block th:include="butgo/bg_include :: bg_category_type_page_classify(nodeType=${nodeType})" />
				<th:block th:include="butgo/bg_include :: bg_right_aside" />
			</main>
		</div>

		<div class="page" id="body-wrap" th:case="TAG_TRUCK">
			<th:block
				th:include="butgo/bg_include :: bg_header_half(siteTitle='标签列表',siteImg=@{/static/butgo/images/thumbs/1.jpg})" />
			<main class="layout" id="content-inner" style="height: auto !important;">
				<th:block th:include="butgo/bg_include ::bg_category_type_page_tag(nodeType=${nodeType})" />
				<th:block th:include="butgo/bg_include :: bg_right_aside" />
			</main>
		</div>

		<div class="page" id="body-wrap" th:case="TAG">
			<th:block
				th:include="butgo/bg_include :: bg_header_half(siteTitle='分类列表',siteImg=@{/static/butgo/images/thumbs/0.jpg})" />
			<main class="layout" id="content-inner" style="height: auto !important;">
				<th:block th:include="butgo/bg_include :: bg_category_type_page_classify(nodeType=${nodeType})" />
				<th:block th:include="butgo/bg_include :: bg_right_aside" />
			</main>
		</div>
	</th:block>
</div>

<div th:fragment="bg_category_tree(childCategory)">
	<ul class="category-list-child" th:if="${childCategory!=null}" >
		<li class="category-list-item" th:each="category:${childCategory}"><a
				class="category-list-link"
				th:href="${bgConfig['oly.web.domain']+'/category/'+category.categoryId}"
				th:text="${category.categoryName}">Charlotte</a><span class="category-list-count"
				th:text="${category.categoryPassCount}">1</span>
		<th:block th:include="butgo/bg_include :: bg_category_tree(childCategory=${category.childList})" />
	   </li>
	</ul>
</div>

<!-- 分类列表 -->
<div th:fragment="bg_category_type_page_classify(nodeType)">
	<div id="page" th:with="category=${@categoryTag.selectCmsCategoryTree(nodeType,0,'butgo')}">
		<div class="category-lists" th:if="${category?.childList!=null}">
			<ul class="category-list">
				<li class="category-list-item" th:each="oneCategory:${category.childList}">
					<a class="category-list-link"
						th:href="${bgConfig['oly.web.domain']+'/category/'+oneCategory.categoryId}"
						th:text="${oneCategory.categoryName}"></a>
					<span class="category-list-count" th:text="${oneCategory.categoryPassCount}">2</span>
					<th:block th:include="butgo/bg_include :: bg_category_tree(childCategory=${oneCategory?.childList})" />
				</li>
			</ul>
		</div>
		<div th:if="${category?.childList==null}">
			未查询到任何分类信息！
		</div>
	</div>
</div>

<!-- 标签列表 -->
<div th:fragment="bg_category_type_page_tag(nodeType)">
	<div id="page" th:with="tags=${@categoryTag.listCmsCategory(nodeType,'butgo')}">
		<div class="tag-cloud-list is-center" th:if="${tags!=null}">
			<a th:each="tag:${tags}" th:href="${bgConfig['oly.web.domain']+'/category/'+tag.categoryId}"
				th:text="${tag.categoryName+'('+tag.categoryPassCount+')'}">教程
			</a>
		</div>
		<div class="tag-cloud-list is-center" th:if="${tags==null}">
			未查询到任何标签信息！
		</div>
	</div>
</div>

<!-- 归档 -->
<div th:fragment="bg_time_line_list(timeData)">
	<div id="archive">
		<div class="article-sort-title" th:text="${'文章总数 - '+timeData.total}">
		</div>
		<div class="article-sort">
			<th:block th:each="articleMap,articleStat:${timeData.map}">
				<div class="article-sort-item year" th:text="${articleStat.current.key}">2020</div>
				<div class="article-sort-item" th:each="article,stat:${articleStat.current.value}">
					<a class="article-sort-item-img"
						th:href="${bgConfig['oly.web.domain']+'/article/'+article.articleId}"
						th:title="${article.articleTitle}">
						<img th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/butgo/images/thumbs/}"
							th:src="${(imgs==null)?(iul+rando+'.jpg'):imgs[0]}"
							th:data-lazy-src="@{/static/butgo/images/loading/loading.gif}"
							th:alt="${article.articleTitle}"
							onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-ll-status="error"
							class="entered error"></a>
					<div class="article-sort-item-info">
						<div class="article-sort-item-time"><i class="fa fa-calendar" aria-hidden="true"></i>
							<time class="post-meta-date-created" th:datetime="${article.createTime}"
								th:title="${'发表于'+#dates.format(article.createTime,'yyyy-MM-dd HH:mm')}"
								th:text="${#dates.format(article.createTime,'yyyy-MM-dd HH:mm')}">
							</time>
						</div>
						<a class="article-sort-item-title"
							th:href="${bgConfig['oly.web.domain']+'/article/'+article.articleId}"
							th:title="${article.articleTitle}" th:text="${article.articleTitle}">
						</a>
					</div>
				</div>
			</th:block>
		</div>
		<nav id="pagination" th:if="${timeData.pages>1}">
			<div class="pagination"
				th:with="cr=${crTime==null?'':'?crTime='+crTime},pageSize=${pageSize==null?20:pageSize}">
				<a th:if="${timeData.pageNum!=1}"
					th:href="${bgConfig['oly.web.domain']+'/timeLine/page/1'+'/'+pageSize+cr}">首页</a>
				<a class="extend prev" rel="prev" th:if="${timeData.pageNum>1}"
					th:href="${bgConfig['oly.web.domain']+'/timeLine/page/'+(timeData.pageNum-1)+'/'+pageSize+cr}">
					<i class="fa fa-chevron-left fa-fw"></i>
				</a>
				<!--显示1-5页 页数少于5页-->
				<a th:if="${timeData.pages<6}" class="page-number" th:each="i:${#numbers.sequence(1,timeData.pages)}"
					th:text="${i}" th:href="${bgConfig['oly.web.domain']+'/timeLine/page/'+i+'/'+pageSize+cr}"
					th:classappend="${timeData.pageNum==i?'current':''}"></a>
				<!--显示中间页 页数大于5页-->
				<a th:if="${timeData.pages>5 and timeData.pageNum<4}" th:each="i:${#numbers.sequence(1,5)}"
					th:text="${i}" th:href="${bgConfig['oly.web.domain']+'/timeLine/page/'+i+'/'+pageSize+cr}"
					class="page-number" th:classappend="${timeData.pageNum==i?'current':''}"></a>

				<a th:if="${timeData.pages>5 and (timeData.pages-timeData.pageNum)>5 and timeData.pageNum>3}"
					th:each="i:${#numbers.sequence(timeData.pageNum-2,timeData.pageNum+2)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/timeLine/page/'+i+'/'+pageSize+cr}" class="page-number"
					th:classappend="${timeData.pageNum==i?'current':''}"></a>
				<!--显示最后5页 页数大于5页-->
				<a th:if="${timeData.pageNum>3 and (timeData.pages-timeData.pageNum)<6 and (timeData.pages-timeData.pageNum)>2}"
					th:each="i:${#numbers.sequence(timeData.pageNum-2,timeData.pageNum+2)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/timeLine/page/'+i+'/'+pageSize+cr}" class="page-number"
					th:classappend="${timeData.pageNum==i?'current':''}"></a>
				<a th:if="${timeData.pages>5 and (timeData.pages-timeData.pageNum)<3}"
					th:each="i:${#numbers.sequence(timeData.pages-4,timeData.pages)}" th:text="${i}"
					th:href="${bgConfig['oly.web.domain']+'/timeLine/page/'+i+'/'+pageSize+cr}" class="page-number"
					th:classappend="${timeData.pageNum==i?'current':''}"></a>
				<a class="extend next" rel="next" th:if="${timeData.pageNum<timeData.pages}"
					th:href="${bgConfig['oly.web.domain']+'/timeLine/page/'+(timeData.pageNum+1)+'/'+pageSize+cr}">
					<i class="fa fa-chevron-right fa-fw"></i>
				</a>
				<a th:if="${timeData.pageNum!=timeData.pages}"
					th:href="${bgConfig['oly.web.domain']+'/timeLine/page/'+timeData.pages+'/'+pageSize+cr}">尾页</a>
			</div>
		</nav>
	</div>
</div>

<!-- 文章 -->
<div th:fragment="bg_article(article)">
	<div class="post" id="body-wrap" style="height: auto !important; min-height: 0px !important;">
		<header class="post-bg" id="page-header"
			th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/butgo/images/thumbs/}"
			th:style="'background-image:url('+${(imgs==null)?(iul+rando+'.jpg'):imgs[0]}+')'">
			<th:block th:include="butgo/bg_include ::bg_nav" />
			<div id="post-info">
				<h1 class="post-title" th:text="${article.articleTitle}"></h1>
				<div id="post-meta">
					<div class="meta-firstline">
						<span class="post-meta-date">
							<i class="fa-fw post-meta-icon far fa-calendar-alt"></i>
							<span class="post-meta-label">发表于</span>
							<time th:datetime="${article.createTime}"
								th:title="${'发表于'+#dates.format(article.createTime,'yyyy-MM-dd HH:mm')}"
								style="display: inline;"
								th:text="${#dates.format(article.createTime,'yyyy-MM-dd HH:mm')}">
								2020-5-28
							</time>
						</span>
						<span class="article-meta">
							<span class="article-meta-separator">|</span>
							<i class="fa fa-inbox"></i>
							<th:block th:each="category:${article.mapCategory['classify']}">
								&nbsp;
								<a class="article-meta__categories"
									th:href="${bgConfig['oly.web.domain']+'/category/'+category.categoryId}"
									th:title="${category.categoryName}" th:text="${category.categoryName}">分类</a>
								&nbsp;
							</th:block>
							<span class="article-meta-separator">|</span>
							<i class="fa fa-tags" aria-hidden="true"></i>
							<th:block th:each="tag:${article.mapCategory['tag']}">
								<a class="article-meta__categories"
									th:href="${bgConfig['oly.web.domain']+'/tag/'+tag.categoryId}"
									th:title="${tag.categoryName}" th:text="${tag.categoryName}">标签</a>
								&nbsp;
							</th:block>
						</span>
					</div>
					<div class="meta-secondline"><span class="post-meta-separator">|</span>
						<span class="post-meta-wordcount"><i class="fa fa-file-word fa-fw post-meta-icon"></i><span
								class="post-meta-label">字数统计:</span><span class="word-count"
								id="wordCount">7.2k</span><span class="post-meta-separator">|</span><i
								class="fa fa-clock fa-fw post-meta-icon"></i><span
								class="post-meta-label">阅读时长:</span><span id="readCount"></span></span>
						<span class="post-meta-separator">|</span><span class="post-meta-pv-cv"
							th:data-flag-title="${article.articleTitle}"><i
								class="fa fa-eye fa-fw post-meta-icon"></i><span
								class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv">91032</span></span>
					</div>
				</div>
			</div>
		</header>
		<main class="layout" id="content-inner" style="height: auto !important;">
			<div id="post">
				<article class="post-content" id="article-container" th:utext="${article.articleContent}">

				</article>
				<div class="post-copyright">
					<div class="post-copyright__author"><span class="post-copyright-meta">文章作者:</span> <span
							class="post-copyright-info" th:text="${article.createUser.nickName}"></span></div>
					<div class="post-copyright__type"><span class="post-copyright-meta">文章地址:</span> <span
							class="post-copyright-info"><a
								th:href="${bgConfig['oly.web.domain']+'/article/'+article.articleId}"
								th:text="${bgConfig['oly.web.domain']+'/article/'+article.articleId}"></a></span></div>
					<div class="post-copyright__notice"><span class="post-copyright-meta">版权申明:</span> <span
							class="post-copyright-info">本网站所有文章除特別声明外，均采用 <a
								href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
								rel="external nofollow noreferrer" target="_blank">CC BY-NC-SA 4.0</a>许可协议。转载请注明来自于 <a
								href="https://butterfly.js.org" target="_blank">止戈</a>！</span></div>
				</div>
				<div class="tag_share">
					<!-- <div class="post-meta__tag-list" th:with="hotTags=${@tagTag.listTagByOrderNum(1,'butgo')}">
						<a th:each="tag:${hotTags}" class="post-meta__tags"
							th:href="${bgConfig['oly.web.domain']+'/tag/'+tag.tagId}" th:text="${tag.tagName}"></a>
					</div> -->
					<br>
					<div class="post-meta__tag-list" style="width: 100%;text-align: center;">
						<div id="post-like" class="post-meta__tags"> <i class="fa fa-thumbs-up" aria-hidden="true"></i>
							<span class="nums visible" th:text="${article.articleCount.articleLike}"></span>
						</div>
						<div id="post-nasty" class="post-meta__tags"><i class="fa fa-thumbs-down"
								aria-hidden="true"></i>
							<span class="nums visible" th:text="${article.articleCount.articleNasty}"></span>
						</div>
					</div>
				</div>

				<div class="post-reward" style="margin-top: 10px;" th:if="${bgConfig['oly.web.theme.butgo.pay']}">
					<div class="reward-button"><i class="fa fa-qrcode"></i> 打赏</div>
					<div class="reward-main">
						<ul class="reward-all">
							<li class="reward-item"><a th:href="${bgConfig['oly.web.theme.butgo.weiPay']}"
									rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img"
										th:src="${bgConfig['oly.web.theme.butgo.weiPay']}"
										th:data-lazy-src="@{/static/butgo/images/loading/loading.gif}" alt="微信"></a>
								<div class="post-qr-code-desc">微信</div>
							</li>
							<li class="reward-item"><a th:href="${bgConfig['oly.web.theme.butgo.zhiPay']}"
									rel="external nofollow noreferrer" target="_blank"><img class="post-qr-code-img"
										th:src="${bgConfig['oly.web.theme.butgo.zhiPay']}"
										th:data-lazy-src="@{/static/butgo/images/loading/loading.gif}" alt="支付宝"></a>
								<div class="post-qr-code-desc">支付宝</div>
							</li>
						</ul>
					</div>
				</div>

				<!-- 上一篇 下一篇 -->
				<nav class="pagination-post" id="pagination" th:with="preArticle=${@articleCountSortTag.selectPreArticle(article.articleId,'butgo')},
				        nextArticle=${@articleCountSortTag.selectNextArticle(article.articleId,'butgo')}">
					<div class="prev-post pull-left" th:if="${preArticle!=null}">
						<a th:href="${bgConfig['oly.web.domain']+'/article/'+preArticle.articleId}"
							th:with="imgs=${@commonTag.split(preArticle.articleImg==null?'':preArticle.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/butgo/images/thumbs/}">
							<img class="prev-cover" th:src="${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
								th:data-lazy-src="@{/static/butgo/images/loading/loading.gif}"
								onerror="onerror=null,src=&quot;/img/404.jpg&quot;" alt="cover of previous post">
							<div class="pagination-info">
								<div class="label">上一篇</div>
								<div class="prev_info" th:text="${preArticle.articleTitle}">Butterfly 安裝文檔(五) 主題問答</div>
							</div>
						</a>
					</div>
					<div class="next-post pull-right" th:if="${nextArticle!=null}">
						<a th:href="${bgConfig['oly.web.domain']+'/article/'+nextArticle.articleId}"
							th:with="imgs=${@commonTag.split(nextArticle.articleImg==null?'':nextArticle.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/butgo/images/thumbs/}"><img
								class="next-cover" th:src="${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
								th:data-lazy-src="@{/static/butgo/images/loading/loading.gif}"
								onerror="onerror=null,src=&quot;/img/404.jpg&quot;" alt="cover of next post">
							<div class="pagination-info">
								<div class="label">下一篇</div>
								<div class="prev_info" th:text="${nextArticle.articleTitle}">Butterfly 安裝文檔(五) 主題問答
								</div>
							</div>
						</a>
					</div>
				</nav>

				<!-- 相关文章推荐 -->
				<div class="relatedPosts"
					th:with="tuiArticle=${@articleCountSortTag.listWebArticleOrderByCategoryId('butgo',article.mapCategory['classify'][0].categoryId,1,10,'TIME','ASC')}">
					<div class="headline">
						<i class="fa fa-thumbs-up fa-fw"></i>
						<span>相关推荐</span>
					</div>
					<div style="background-color: white;"
						th:if="${#lists.isEmpty(tuiArticle) || #lists.size(tuiArticle)==1}">
						暂无推荐
					</div>
					<div class="relatedPosts-list">
						<div th:each="t:${tuiArticle}" th:if="${t.articleId!=article.articleId}">
							<a th:href="${bgConfig['oly.web.domain']+'/article/'+t.articleId}"
								th:title="${t.articleTitle}">
								<img class="cover"
									th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/butgo/images/thumbs/}"
									th:src="${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
									th:data-lazy-src="@{/static/butgo/images/loading/loading.gif}" alt="cover">
								<div class="content is-center">
									<div class="date"><i class="far fa-calendar-alt fa-fw"></i>
										<th:block th:text="${#dates.format(t.createTime,'yyyy-MM-dd HH:mm')}">
										</th:block>
									</div>
									<div class="title" th:text="${t.articleTitle}">Butterfly 安裝文檔(一) 快速開始</div>
								</div>
							</a>
						</div>
					</div>
				</div>
				<hr>
				<th:block th:include="butgo/bg_include :: bg_comment" />
			</div>
			<th:block th:include="butgo/bg_include :: bg_article_aside" />
		</main>
		<th:block th:include="butgo/bg_include :: bg_footer(footerImg=@{/static/butgo/images/thumbs/0.jpg})" />
	</div>
</div>

<!-- 评论 -->
<div th:fragment="bg_comment">
	<div id="post-comment">
		<div class="comment-head">
			<div class="comment-headline"><i class="fa fa-comments fa-fw"></i><span id="comment-headline"> 评论</span>
			</div>
		</div>
		<div class="comment-wrap">
			<div>
				<div id="twikoo" class="twikoo">
					<div class="tk-comments">
						<div class="tk-submit">
							<div class="tk-row">
								<div class="tk-avatar">
									<div class="tk-avatar-img"><svg xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 496 512">
											<path
												d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z">
											</path>
										</svg></div>
									<!---->
								</div>
								<div class="tk-col">
									<div id="standalone-container" style="display: none;">
										<div id="toolbar-container">
											<span class="ql-formats">
												<select class="ql-font"></select>
												<select class="ql-size"></select>
											</span>
											<span class="ql-formats">
												<button class="ql-bold"></button>
												<button class="ql-italic"></button>
												<button class="ql-underline"></button>
												<button class="ql-strike"></button>
											</span>
											<span class="ql-formats">
												<select class="ql-color"></select>
												<select class="ql-background"></select>
											</span>
											<span class="ql-formats">
												<button class="ql-script" value="sub"></button>
												<button class="ql-script" value="super"></button>
											</span>
											<span class="ql-formats">
												<button class="ql-header" value="1"></button>
												<button class="ql-header" value="2"></button>
												<button class="ql-blockquote"></button>
												<button class="ql-code-block"></button>
											</span>
											<span class="ql-formats">
												<button class="ql-list" value="ordered"></button>
												<button class="ql-list" value="bullet"></button>
												<button class="ql-indent" value="-1"></button>
												<button class="ql-indent" value="+1"></button>
											</span>
											<span class="ql-formats">
												<button class="ql-direction" value="rtl"></button>
												<select class="ql-align"></select>
											</span>
											<span class="ql-formats">
												<button class="ql-link"></button>
												<button class="ql-formula"></button>
											</span>
											<span class="ql-formats">
												<button class="ql-clean"></button>
											</span>
										</div>
										<div id="editor-container"></div>
									</div>
								</div>
							</div>
							<div class="tk-row actions">
								<button disabled="disabled" type="button"
									class="el-button tk-send el-button--primary el-button--small">
									<!---->
									<!----><span onclick="submit()" id="sb-btn">评论</span>
								</button>
							</div>
							<!---->
						</div>
						<div class="tk-comments-container">
							<div class="tk-comments-title">
								<span class="tk-comments-count">
									<span th:text="${article.articleCount.articleDiscuss}"></span> <span>
										条评论</span></span> <span><span class="tk-icon"><svg
											xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
											<path
												d="M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z">
											</path>
										</svg></span>
									<!---->
								</span>
							</div>
							<div id="comment-box">

							</div>
							<div id="comment-more" style="display: block;">
								<div class="tk-expand"><span onclick="readMore()">查看更多</span>
									<div class="el-loading-mask" style="display: block;" id="comment-loading">
										<div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular">
												<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
											</svg>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>



	<script id="comment-item-one" type="text/html">
	{{each rows oneComment i}}
	<div id="{{oneComment.commentId}}" class="tk-comment">
		<div class="tk-avatar tk-clickable tk-has-avatar" nick="{{oneComment.fromUser.nickName}}">
			<!----> <img src="{{oneComment.fromUser.avatar}}" alt="" class="tk-avatar-img">
		</div>
		<div class="tk-main">
			<div class="tk-row">
				<div class="tk-meta">
					<!----> <a href="#" target="_blank" rel="noopener noreferrer" class="tk-nick tk-nick-link"><strong>{{oneComment.fromUser.nickName}}</strong>{{if oneComment.fromUser.userName==$imports.articleCreateBy}}
					<span class="tk-tag tk-tag-green">
						博主
					</span>
					{{/if}}</a>
				
					<!----> <small class="tk-time"><time datetime="{{oneComment.createTime}}" title="{{oneComment.createTime}}">{{oneComment.createTime}}</time></small>
				</div>
				<div class="tk-action"><a class="tk-action-link"  id="comment_{{oneComment.commentId}}" onclick="addCommentLike({{oneComment.commentId}})">
					<span style="margin-right:0 ;" class="tk-action-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
								<path d="M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z">
								</path>
							</svg></span> <span class="tk-action-icon tk-action-icon-solid" style="margin-right:0 ;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
								<path d="M104 224H24c-13.255 0-24 10.745-24 24v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zM64 472c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zM384 81.452c0 42.416-25.97 66.208-33.277 94.548h101.723c33.397 0 59.397 27.746 59.553 58.098.084 17.938-7.546 37.249-19.439 49.197l-.11.11c9.836 23.337 8.237 56.037-9.308 79.469 8.681 25.895-.069 57.704-16.382 74.757 4.298 17.598 2.244 32.575-6.148 44.632C440.202 511.587 389.616 512 346.839 512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2 1.282-6.271 3.558-8.521 39.614-39.144 56.648-80.587 89.117-113.111 14.804-14.832 20.188-37.236 25.393-58.902C282.515 39.293 291.817 0 312 0c24 0 72 8 72 81.452z">
								</path>
							</svg></span> <span class="tk-action-count">{{oneComment.likeCount}}</span></a> 
							<a class="tk-action-link" href="#comment-headline" onclick="addComment({{oneComment.commentId}},{{oneComment.fromBy.userName}})"><span class="tk-action-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
								<path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z">
								</path>
							</svg></span> <span class="tk-action-icon tk-action-icon-solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
								<path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z">
								</path>
							</svg></span> </a>
						</div>
			</div>
			<div class="tk-content">
				{{#oneComment.content}}
			</div>
			<div class="tk-extras">
				<div class="tk-extra"><span class="tk-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
							<path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z">
							</path>
						</svg></span> <span class="tk-extra-text"> {{oneComment.userSystem}}</span></div>
				<div class="tk-extra"><span class="tk-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
							<path d="M131.5 217.5L55.1 100.1c47.6-59.2 119-91.8 192-92.1 42.3-.3 85.5 10.5 124.8 33.2 43.4 25.2 76.4 61.4 97.4 103L264 133.4c-58.1-3.4-113.4 29.3-132.5 84.1zm32.9 38.5c0 46.2 37.4 83.6 83.6 83.6s83.6-37.4 83.6-83.6-37.4-83.6-83.6-83.6-83.6 37.3-83.6 83.6zm314.9-89.2L339.6 174c37.9 44.3 38.5 108.2 6.6 157.2L234.1 503.6c46.5 2.5 94.4-7.7 137.8-32.9 107.4-62 150.9-192 107.4-303.9zM133.7 303.6L40.4 120.1C14.9 159.1 0 205.9 0 256c0 124 90.8 226.7 209.5 244.9l63.7-124.8c-57.6 10.8-113.2-20.8-139.5-72.5z">
							</path>
						</svg></span> <span class="tk-extra-text"> {{oneComment.userBower}}</span></div>
			</div>
			<div class="tk-replies">
				{{include 'comment-item-two' oneComment}}
			</div>

			{{if oneComment.childPage.rows.length>1}}
			<div  class="tk-expand" onclick="commentExpand(this)">展开</div>
            {{/if}}
			
			<!---->
			<!---->
			<!---->
		</div>
	</div>
	{{/each}}

</script>

	<script id="comment-item-two" type="text/html">
	{{each childPage.rows twoComment i2}}
	<div id="{{twoComment.commentId}}" class="tk-comment tk-master">
		<div class="tk-avatar tk-clickable tk-has-avatar" nick="{{twoComment.fromUser.uerName}}">
			<!---->
			<img src="{{twoComment.fromUser.avatar}}" alt="{{twoComment.fromUser.nickName}}" class="tk-avatar-img">
		</div>
		<div class="tk-main">
			<div class="tk-row">
				<div class="tk-meta">
					<!---->
					<a href="https://couqiao.net" target="_blank" rel="noopener noreferrer" class="tk-nick tk-nick-link">
						<strong>
							{{twoComment.fromUser.nickName}}
						</strong>
					</a>
					{{if twoComment.fromUser.userName==$imports.articleCreateBy}}
					<span class="tk-tag tk-tag-green">
						博主
					</span>
					{{/if}}
					
					<!---->
					<!---->
					<small class="tk-time">
						<time datetime="{{twoComment.createTime}}" title="{{twoComment.createTime}}">
							{{twoComment.createTime}}
						</time>
					</small>
					<!---->
				</div>
				<div class="tk-action"><a class="tk-action-link" onclick="addCommentLike({{twoComment.commentId}})">
					<span style="margin-right:0 ;" class="tk-action-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
								<path d="M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z">
								</path>
							</svg></span> <span class="tk-action-icon tk-action-icon-solid" style="margin-right:0 ;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
								<path d="M104 224H24c-13.255 0-24 10.745-24 24v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V248c0-13.255-10.745-24-24-24zM64 472c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zM384 81.452c0 42.416-25.97 66.208-33.277 94.548h101.723c33.397 0 59.397 27.746 59.553 58.098.084 17.938-7.546 37.249-19.439 49.197l-.11.11c9.836 23.337 8.237 56.037-9.308 79.469 8.681 25.895-.069 57.704-16.382 74.757 4.298 17.598 2.244 32.575-6.148 44.632C440.202 511.587 389.616 512 346.839 512l-2.845-.001c-48.287-.017-87.806-17.598-119.56-31.725-15.957-7.099-36.821-15.887-52.651-16.178-6.54-.12-11.783-5.457-11.783-11.998v-213.77c0-3.2 1.282-6.271 3.558-8.521 39.614-39.144 56.648-80.587 89.117-113.111 14.804-14.832 20.188-37.236 25.393-58.902C282.515 39.293 291.817 0 312 0c24 0 72 8 72 81.452z">
								</path>
							</svg></span> <span class="tk-action-count">{{twoComment.likeCount}}</span></a> 
							<a class="tk-action-link" href="#comment-headline" onclick="addComment({{twoComment.parentId}},{{twoComment.fromBy.userName}})"><span class="tk-action-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
								<path d="M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z">
								</path>
							</svg></span> <span class="tk-action-icon tk-action-icon-solid"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
								<path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z">
								</path>
							</svg></span> </a></div>
			</div>
			<div class="tk-content">
				<span>
					回复
					<a href="#5b049cc862183f650e3307464c8da3ce">
						@{{twoComment.replyUser.nickName}}
					</a>
				</span>
				<div>
						{{#twoComment.content}}

				</div>
			</div>
			<div class="tk-extras">
				<div class="tk-extra">
					<span class="tk-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
							<path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z">
							</path>
						</svg>
					</span>
					<span class="tk-extra-text">
						{{twoComment.userSystem}}
					</span>
				</div>
				<div class="tk-extra">
					<span class="tk-icon">
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
							<path d="M481.92,134.48C440.87,54.18,352.26,8,255.91,8,137.05,8,37.51,91.68,13.47,203.66c26-46.49,86.22-79.14,149.46-79.14,79.27,0,121.09,48.93,122.25,50.18,22,23.8,33,50.39,33,83.1,0,10.4-5.31,25.82-15.11,38.57-1.57,2-6.39,4.84-6.39,11,0,5.06,3.29,9.92,9.14,14,27.86,19.37,80.37,16.81,80.51,16.81A115.39,115.39,0,0,0,444.94,322a118.92,118.92,0,0,0,58.95-102.44C504.39,176.13,488.39,147.26,481.92,134.48ZM212.77,475.67a154.88,154.88,0,0,1-46.64-45c-32.94-47.42-34.24-95.6-20.1-136A155.5,155.5,0,0,1,203,215.75c59-45.2,94.84-5.65,99.06-1a80,80,0,0,0-4.89-10.14c-9.24-15.93-24-36.41-56.56-53.51-33.72-17.69-70.59-18.59-77.64-18.59-38.71,0-77.9,13-107.53,35.69C35.68,183.3,12.77,208.72,8.6,243c-1.08,12.31-2.75,62.8,23,118.27a248,248,0,0,0,248.3,141.61C241.78,496.26,214.05,476.24,212.77,475.67Zm250.72-98.33a7.76,7.76,0,0,0-7.92-.23,181.66,181.66,0,0,1-20.41,9.12,197.54,197.54,0,0,1-69.55,12.52c-91.67,0-171.52-63.06-171.52-144A61.12,61.12,0,0,1,200.61,228,168.72,168.72,0,0,0,161.85,278c-14.92,29.37-33,88.13,13.33,151.66,6.51,8.91,23,30,56,47.67,23.57,12.65,49,19.61,71.7,19.61,35.14,0,115.43-33.44,163-108.87A7.75,7.75,0,0,0,463.49,377.34Z">
							</path>
						</svg>
					</span>
					<span class="tk-extra-text">
						{{twoComment.userBower}}
					</span>
				</div>
			</div>
			<!---->
			<!---->
			<!---->
		</div>
	</div>
	{{/each}}
</script>
</div>

<!-- 文章目录 -->
<div th:fragment="bg_card_post_toc">
	<div class="card-widget" id="card-toc">
		<div class="item-headline">
			<i class="fa fa-list"></i>
			<span>目录</span>
			<span class="toc-percentage">0</span>
		</div>
		<div class="toc-content is-expand" id="toc-content">

		</div>
	</div>
</div>

<!-- 文章侧边 -->
<div th:fragment="bg_article_aside">
	<div class="aside-content" id="aside-content" style="height: auto !important;">
		<th:block th:include="butgo/bg_include ::bg_card_info" />
		<th:block th:include="butgo/bg_include ::bg_card_notice" />
		<div class="sticky_layout" style="height: auto !important;">
			<th:block th:include="butgo/bg_include ::bg_card_post_toc" />
			<th:block th:include="butgo/bg_include ::bg_sticky" />
		</div>
	</div>
</div>

<!-- 站点外链 -->
<div th:fragment="bg_link(groupLinks)">
	<div id="page">
		<div id="article-container">
			<div class="flink">
				<th:block th:each="groupLink,userStat:${groupLinks}">
					<h2 th:id="${userStat.current.key}"><a th:href="${'#'+userStat.current.key}" class="headerlink"
							th:title="${userStat.current.key}"></a>
						<i class="fa fa-check-double" style="color:#f66;padding-right:.4rem"></i><span
							th:text="${userStat.current.key}"></span>
					</h2>
					<div class="flink-list">
						<div class="flink-list-item" th:each="link:${userStat.current.value}">
							<a th:href="${link.linkUrl}" rel="external nofollow noreferrer" th:title="${link.linkName}"
								target="_blank">
								<div class="flink-item-icon"><img class="no-lightbox entered error"
										th:data-lazy-src="@{/static/butgo/images/loading/loading.gif}"
										th:onerror="this.src='/static/butgo/images/default_link_logo.png'"
										th:alt="${link.linkName}" th:src="${link.linkFavicon}" data-ll-status="error">
								</div>
								<div class="flink-item-name" th:text="${link.linkName}"></div>
								<div class="flink-item-desc" th:title="${link.linkSuggest}"
									th:text="${link.linkSuggest}"></div>
							</a>
						</div>
					</div>
				</th:block>
				<hr>
				<p>如果你想把自己的网站也新增到<code>友链</code>页面,请</p>
				<blockquote>
					<ol>
						<li>确保你的网站能正常打开</li>
						<li>确保你的网站是安全合法的</li>
						<li>请把相关信息发送到邮箱634866553@qq.com</li>
					</ol>
				</blockquote>
			</div>
		</div>
	</div>
</div>

<!-- 底部 -->
<div th:fragment="bg_footer(footerImg)">
	<footer id="footer" th:style="'background-image: url('+${footerImg}+')'">
		<div id="footer-wrap">
			<div class="copyright">&copy;2017 - 2022 By
				<th:block th:text="${bgConfig['oly.web.author']}">
				</th:block>
			</div>
			<div class="framework-info">
				<span>框架</span>
				<a target="_blank" rel="noopener" href="https://hexo.io">止戈建站
				</a><span class="footer-separator">
					|</span>
				<span>主题</span>
				<a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a>
			</div>
			<div class="footer_custom_text" th:utext="${bgConfig['oly.web.footer']}">
			</div>
		</div>
	</footer>
	<canvas width="1919" height="961"
		style="opacity: 0.6; position: fixed; top: 0px; left: 0px; z-index: -1; width: 100%; height: 100%; pointer-events: none;"></canvas>
</div>
<!-- 静态资源 -->
<div th:fragment="bg_js">
	<script th:src="@{/static/butgo/js/utils.js}"></script>
	<script th:src="@{/static/butgo/js/main.js}"></script>
	<script th:src="@{/static/butgo/js/fancybox.umd.js}"></script>
	<script defer="" id="ribbon" th:src="@{/static/butgo/js/canvas-ribbon.min.js}" size="150" alpha="0.6" zindex="-1"
		mobile="true" data-click="true"></script>
	<script th:src="@{/static/butgo/js/busuanzi.pure.mini.js}"></script>
	<script th:src="@{/static/butgo/libs/alert/alert.main.js}"></script>
	<script th:src="@{/static/butgo/libs/message/message.main.js}"></script>
	<script th:inline="JavaScript">
		var ctx = [[@{/}]];
		let _tempPosition = 'center';

		// 第三步：初始化插件
		const tzAlert = new TzAlert({
			id: 'alert1',
			center: true, // 内容居中
			useEscClose: true,
			useInitShow: false,  // 实例化完成直接显示
			useMaskClose: true,
			position: _tempPosition,
			confirm: {
				use: false
			},
			cancel: {
				use: false
			},
			title: {
				html: '登录',
				color: '#ff80ab',
				fontSize: '18px'
			},
			mask: {
				use: true,
				background: 'rgba(0,0,0,.6)'
			},
			content: {
				html: `<div class="login-wrap">
	<form class="form" id="login-form">
		<input type="text" placeholder="用户名" name="username" />
		<input type="password" placeholder="密码" name="password" />
		<input type="text" name="code" id="code" style="width:150px" placeholder="验证码" required />
		<img class="pull-right" id="captcha" style="cursor: pointer; height: 38px;display: none;margin-right: 50px;"
            onclick="getCaptchaImage()" title="点击刷新" alt="captcha" />
        <input type="hidden" name="uuid" id="uuid" />
		<div class="checkbox-custom">
		<input type="checkbox" id="rememberme" name="rememberMe"> <label for="rememberme">记住我</label>
		</div>
		<button onclick="login()" type="button" id="login-btn"> 登录 </button>
		<a href="#"> <p> 没有账号？点击注册 </p></a>
	</form>
</div>`
			},
			onEvents: function (e) {
				var ctx = e.ctx, cancel = e.cancel, confirm = e.confirm;
				console.log('监听了内部的按钮事件')
				console.log(e)
				if (e.cancel) {
					tzAlert.close();
					e.ctx.close();
					console.log('点击了取消按钮');
				}
				else if (e.confirm) {
					console.log('点击了确定按钮')
				}
			},
			onMounted: function () {
				getCaptchaImage();
			}
		});
		var t;
		function login() {
			var lgr = document.getElementById('login-btn');
			clearTimeout(t);
			ajax({
				type: "POST",
				url: ctx + "login?" + convertData(getElements('login-form')),
				dataType: "json",
				contentType: "application/json",
				beforeSend: function () {
					//some js code
				},
				success: function (res) {
					if (res.code == 200) {
						Qmsg.info('登录成功,马上刷新本页!');
						setTimeout(function () {
							location.reload();
						}, 1500);
					}
					else {
						lgr.innerHTML = res.msg;
						t = setTimeout(function () {
							lgr.innerHTML = "登录"
						}, 5000);
					}
				},
				error: function () {
					lgr.innerHTML = "系统错误";
					t = setTimeout(function () {
						lgr.innerHTML = "登录"
					}, 5000);
				}
			})
			return false;
		}
		//获取指定form中的所有的<input>对象   
		function getElements(formId) {
			var form = document.getElementById(formId);
			let data = {};
			var ta = form.getElementsByTagName('input');
			for (var el of ta) {
				if (el.type == 'checkbox') {
					if (el.checked) {
						data[el.name] = true
					}
					else {
						data[el.name] = false
					}
				}
				else {
					data[el.name] = el.value
				}

			}

			return data;
		}
		// 第四步：调用显示
		// tzAlert.open(); // 初始化显示

		function ajax() {
			var ajaxData = {
				type: arguments[0].type || "GET",
				url: arguments[0].url || "",
				async: arguments[0].async || "true",
				data: arguments[0].data || null,
				dataType: arguments[0].dataType || "text",
				contentType: arguments[0].contentType || "application/x-www-form-urlencoded",
				requested: arguments[0].requested || "XMLHttpRequest",
				beforeSend: arguments[0].beforeSend || function () { },
				success: arguments[0].success || function () { },
				error: arguments[0].error || function () { }
			}
			ajaxData.beforeSend()
			var xhr = createxmlHttpRequest();
			xhr.responseType = ajaxData.dataType;
			xhr.open(ajaxData.type, ajaxData.url, ajaxData.async);
			xhr.setRequestHeader("Content-Type", ajaxData.contentType);
			xhr.setRequestHeader("X-Requested-With", ajaxData.requested);
			xhr.send(convertData(ajaxData.data));
			xhr.onreadystatechange = function () {
				if (xhr.readyState == 4) {
					if (xhr.status == 200) {
						ajaxData.success(xhr.response)
					} else {
						ajaxData.error()
					}
				}
			}
		}

		function createxmlHttpRequest() {
			if (window.ActiveXObject) {
				return new ActiveXObject("Microsoft.XMLHTTP");
			} else if (window.XMLHttpRequest) {
				return new XMLHttpRequest();
			}
		}

		function convertData(data) {
			if (typeof data === 'object') {
				var convertResult = "";
				for (var c in data) {
					convertResult += c + "=" + data[c] + "&";
				}
				convertResult = convertResult.substring(0, convertResult.length - 1)
				return convertResult;
			} else {
				return data;
			}
		}

		function getCaptchaImage() {
			ajax({
				type: "GET",
				url: ctx + document.getElementById("themeName").value + "/code/captchaImage",
				dataType: "json",
				data: getElements('login-form'),
				beforeSend: function () {
					//some js code
				},
				success: function (res) {
					if (res.code == 200) {
						var imgDom = document.getElementById("captcha");
						document.getElementById("captcha").src =
							"data:image/gif;base64," + res.img;
						imgDom.style.display = 'block';
						document.querySelector("input[name='uuid']").value = res.uuid;
					}
					else {
						lgr.innerHTML = "账户或者密码错误";
						t = setTimeout(function () {
							lgr.innerHTML = "登录"
						}, 5000);
					}
				},
				error: function () {
					lgr.innerHTML = "系统错误";
					t = setTimeout(function () {
						lgr.innerHTML = "登录"
					}, 5000);
				}
			})

		}
		function removeHTMLTags(text) {
			return text.replace(/<[^>]+>/g, '');
		}
        


		var commentDom=document.getElementsByClassName("new-comment");
		if(commentDom.length>0)
		{
			for (let index = 0; index < commentDom.length; index++) {
				commentDom[index].innerHTML=removeHTMLTags(commentDom[index].innerHTML);
				
			}
		}
	    document.getElementById("card-newest-comments").style.display='block';

	</script>

</div>

<!-- 404页面 -->
<div th:fragment="bg_404_page(errTitle,errContent)">
	<div class="error404" id="body-wrap">
		<header class="not-top-img" id="page-header">
			<th:block th:include="butgo/bg_include ::bg_nav" />
		</header>
		<div id="error-wrap">
			<div class="error-content">
				<div class="error-img"><img th:src="@{/static/butgo/images/404/404.png}"
						th:data-lazy-src="@{/static/butgo/images/loading/loading.gif}" alt="Page not found"
						data-ll-status="loaded" class="entered loaded"></div>
				<div class="error-info" style="float: right;">
					<h1 class="error_title" th:text="${errTitle}">404</h1>
					<div class="error_subtitle" th:text="${errContent}">頁面沒有找到</div>
				</div>
			</div>
		</div>
	</div>
</div>